import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    StyleSheet
} from 'react-native';

import {
    Switch
} from 'react-native-switch';

import {
    Layout
} from './../../components';

import * as CONST from "../../const";

import connect from './../../utils/connect';

import * as settingTypes from './../../state/types/setting';
import settingAction from './../../state/actions/setting';

interface Props {
    setting:any,
    settingActions:any
}

@connect([`setting`],{
    settingActions:settingAction
})
class Notifications  extends PureComponent<Props> {

    get settingActions() {
        const {
            settingActions
        } = this.props;
        return settingActions;
    }

    get notification() {
        const {
            setting
        } = this.props;
        const {
            notification
        } = setting;
        return notification;
    }

    get match() {
        const {
            match = 0
        } = this.notification;
        return !!match
    }

    get message() {
        const {
            message = 0
        } = this.notification;
        return !!message
    }

    get video() {
        const {
            video = 0
        } = this.notification;
        return !!video
    }

    get renderList() {
        return [
            {title:`Message`,text:`Notify me when I get messages`,type:`message`},
            {title:`Matches`,text:`Notify me when I get matches`,type:`match`}
        ]
    }

    componentDidMount() {
        this.settingActions[
            settingTypes.getNotifyStatus
        ]();
    }

    private _onSwitchChange = async (type:string,value:boolean) => {
        this.settingActions[
            settingTypes.setNotifyStatus
        ](type,value ? 0 : 1)
    }

    render() {
        return (
            <Layout title="Notifications" padding={false}>
                <View style={styles.container}>
                    <Text style={styles.tip}>
                        Enable notifications to keep up to
                    </Text>
                    <Text style={styles.tip}>
                        date on your profile.
                    </Text>
                    <View style={styles.content}>
                        {this.renderList.map((item:any,i:number) => {
                            const {
                                type
                            } = item;
                            const _value = this[type as never] as any;
                            return (
                                <View style={styles.item} key={i}>
                                    <View style={styles.itemContent}>
                                        <Text style={styles.title}>
                                            {item.title}
                                        </Text>
                                        <Text style={styles.text}>
                                            {item.text}
                                        </Text>
                                    </View>
                                    <Switch
                                        value={_value}
                                        barHeight={24}
                                        circleSize={16}
                                        circleBorderWidth={0}
                                        circleActiveColor="#fff"
                                        circleInActiveColor="#fff"
                                        switchWidthMultiplier={2.8}
                                        backgroundInactive="#ececec"
                                        backgroundActive={CONST.color}
                                        onValueChange={() => this._onSwitchChange(type,_value)}
                                    />
                                </View>
                            )
                        })}
                    </View>
                </View>
            </Layout>
        )
    }
}

export default Notifications;

const styles = StyleSheet.create({
    container:{
        paddingHorizontal:18,
        paddingVertical:24,
        backgroundColor:`#fff`
    },
    tip:{
        fontSize:16,
        lineHeight:24,
        color:`#555`,
        textAlign:`center`,
    },
    title:{
        fontSize:14,
        color:`#333`,
        marginBottom:4,
        fontWeight:`bold`
    },
    text:{
        fontSize:12,
        color:`#888`
    },
    item:{
        alignItems:`center`,
        flexDirection:`row`,
        paddingVertical:12,
        borderBottomWidth:1,
        borderColor:`#ccc`
    },
    itemContent:{
        flex:1
    },
    content:{
        paddingTop:80
    }
}) as any;